{% extends "base.html" %}
{% block title %}氧化钙|创意编程社区{% endblock %}
{% block head %}
<link rel="stylesheet" href="static/css/base.css">

<style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;

  }
  .Rotation{
    border-radius: 20px;
    box-shadow: 0px 0px 20px #d5d5d5;
    overflow:hidden;
    height: 200px;
    flex: 3;
  }
  .Daily-ranking{
    margin-right: 20px;
    box-shadow: 0px 0px 20px #d5d5d5;
    height: 200px;
    border-radius: 20px;
    flex: 1;
  }
  .top-flex-container {
    margin-top: 20px;
    display: -webkit-flex;
    display: flex;
    width: 100%;
  }
  </style>
{% endblock %}
{% block body %}

<div class="main_body">
  <!-- 轮播 -->
  <div class="top-flex-container">
    <div class="Daily-ranking"></div>
    <div class="Rotation"></div>
  </div>
 
  <!-- 最新作品 -->
  <div class="clear" style="width: 100%;height: 35px;margin-top: 30px;"><h5 style="float: left;"><i class="fa fa-leaf" style="color: #57ae00;" aria-hidden="true"></i> 最新作品</h5><a href="/Search?key=" style="float: right;">查看全部</a></div>
  <div class="row" style="padding-bottom: 15px;margin-left: 0px;">
    {% for i in range(0, ProjectData|length) %}
    {% if i == 5%}
    <div class="card card-with cover_img" style="padding: 10px;">
    {% else %}
    <div class="card card-with cover_img" style="padding: 10px; margin-right: 10px;">
    {% endif %}
      <img src="{{ ProjectData[i].cover }}" class="cover_img" alt="作品封面" style="border-radius: 8px;">
      <div style="margin-top:5px">
        <img class="img-author" src="../static/scratch/static/avatar.png" alt="{{ ProjectData[i].author_name }}" width="15%">
        <div style="overflow:hidden;height: 40px;width: 80%;">
            <a style="white-space: nowrap;color:black;text-decoration: none;font-size: 15px;" href="/project/{{ ProjectData[i].id }}">{{ ProjectData[i].title }}</a>
            <h6 class="card-text" style="color: darkgray;font-size: 10px;">作者: {{ author[i] }}</h6>
        </div>
      </div>  
    </div>
    {% endfor %}
  </div>

  <!-- 热门作品 -->
  <div class="clear" style="width: 100%;height: 35px;margin-top: 30px;"><h5 style="float: left;"><i class="fa fa-fire" style="color: #ba0000;" aria-hidden="true"></i> 热门作品</h5><a href="/Search?key=" style="float: right;">查看全部</a></div>
  <div class="row" style="padding-bottom: 15px;margin-left: 0px;">
    {% for i in range(0, ProjectData|length) %}
    {% if i == 5%}
    <div class="card card-with cover_img" style="padding: 10px;">
    {% else %}
    <div class="card card-with cover_img" style="padding: 10px; margin-right: 10px;">
    {% endif %}
      <img src="{{ ProjectData[i].cover }}" class="cover_img" alt="作品封面" style="border-radius: 8px;">
      <div style="margin-top:5px">
        <img class="img-author" src="../static/scratch/static/avatar.png" alt="{{ ProjectData[i].author_name }}" width="15%">
        <div style="overflow:hidden;height: 40px;width: 80%;">
            <a style="white-space: nowrap;color:black;text-decoration: none;font-size: 15px;" href="/project/{{ ProjectData[i].id }}">{{ ProjectData[i].title }}</a>
            <h6 class="card-text" style="color: darkgray;font-size: 10px;">作者: {{ author[i] }}</h6>
        </div>
      </div>  
    </div>
    {% endfor %}
  </div>

</div>
<footer class="footer">
  <p>关于 用户协议 帮助</p>
  <p>氧化钙 - 公益Scratch社区</p>
  <p>二次开发Scratch社区</p>
</footer>
{% endblock %}